<template>
    <el-container>
        <el-card :style="{width:'28%',left:'36%',padding:'0 2% 1%',position:'absolute',top:'25%'}">
            <div class="login-title">
                <h1>透析界APP后台管理</h1>
                <span class="text-smaller">系统后台</span>
            </div>
            <el-form label-position="right" :model="formLogin" ref="formLogin" :rules="rules">
                <el-form-item prop="Name">
                    <el-input v-model.trim="formLogin.Name" prefix-icon="fa fa-user-o" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="PassWord">
                    <el-input v-model.trim="formLogin.PassWord" type="PassWord" prefix-icon="fa fa-lock" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn-block" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-container>
</template>

<script>
export default {
      data() {
        return {
            formLogin: {
                Name: '',
                PassWord: '',
            },
            rules:{
                Name:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                PassWord:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max:46, message: '长度在 8 到 46 个字符', trigger: 'blur' },
                ]
            },
            logUrl:this.urlConfig+'/api/Administrator/UserLogin'
        };
    },
    mounted(){

    },
    methods: {
        login:function(){
            var errorInfo=this.validateFun();
            if(!errorInfo){
                this.$http.post(this.logUrl,this.formLogin,{
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res,'res');
                    if(res.body["Code"] == "200") {
                        sessionStorage.setItem('user',JSON.stringify(res.body)); 
                        this.$router.push({ path: '/Dashboard' });
                    }else{
                        this.$notify.error({title: '错误',message:res.body["Message"]});
                    }
                });
            }else{
                this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                return false;
            }
        },
        validateFun:function(){
            var errorInfo='';
            for(var i=0;i<2;i++){
                this.$refs.formLogin.validateField((['Name','PassWord'][i]),(re)=>{
                    errorInfo+=re+(re==''?'':', ');
                })
            }
            return errorInfo;
        },
    }
}
</script>

<style scoped>
    .login-title{
        margin-bottom:40px; 
        text-align: center;
    }
    .login-title h1{
        letter-spacing: -1px;
        font-size: 29px;
        color: dimgray;
    }
    .login-title span{
        color:#909399
    }
</style>

